import { CloudDownloadOutlined, CloudServerOutlined, ExportOutlined } from "@ant-design/icons";
import { Button, Dropdown, MenuProps, Space } from "antd";
import React, { useState } from "react";
import ExportModal from "../ExportModal";
const ImportExportDropdown: React.FC<{
	columns: Array<any>;
	onExport: (values: any) => Promise<void>;
	operText?: string;
	operIcon?: any;
	exportText?: string;
	exportIcon?: any;
	importText?: string;
	importIcon?: any;
}> = ({
	columns = [],
	onExport = values => {},
	operText = "数据操作",
	operIcon = <CloudServerOutlined />,
	exportIcon = <CloudDownloadOutlined />,
	importIcon = <ExportOutlined />,
	importText = "导入数据",
	exportText = "导出数据"
}) => {
	const [exportOpen, setExportOpen] = useState<boolean>(false);

	const items: MenuProps["items"] = [
		{
			key: "export",
			label: (
				<a
					key="export"
					onClick={async () => {
						setExportOpen(true);
					}}
				>
					<Space>
						{exportIcon}
						{exportText}
					</Space>
				</a>
			)
		},
		{
			key: "import",
			label: (
				<a
					target="_blank"
					rel="noopener noreferrer"
					onClick={() => {
						// setImportOpen(true);
					}}
				>
					<Space>
						{importIcon}
						{importText}
					</Space>
				</a>
			)
		}
	];
	return (
		<>
			<Dropdown placement="bottom" trigger={["click"]} menu={{ items }}>
				<Button key="export">
					{operIcon}
					{operText}
				</Button>
			</Dropdown>

			<ExportModal
				onCancel={() => {
					setExportOpen(false);
				}}
				onSubmit={async values => {
					// @ts-ignore
					return await onExport(values).then(() => {
						setExportOpen(false);
					});
				}}
				title="导出职位信息"
				open={exportOpen}
				columns={columns}
			/>
		</>
	);
};

export default ImportExportDropdown;
